import {ref} from "vue";

const isLightTheme = ref(false);
isLightTheme.value = sessionStorage.getItem('themeMode') !== 'theme-blue';

// 基本链接装
export const ports = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
  },
  items: [
    {
      group: 'top',
    },
    {
      group: 'right',
    },
    {
      group: 'bottom',
    },
    {
      group: 'left',
    },
  ],
};

// 基础分组
export const groupsBase = [
  {
    name: 'myself',
    title: '我的图形',
  },
  {
    name: 'builtIn',
    title: '内置组件',
    collapsable: true,
  },
];

// 拓扑内置节点
export const builtBaseNode = [
  {
    shape: 'line',
  },
  {
    width: 50,
    height: 30,
    attrs: {
      body: {
        strokeWidth: 1,
      },
      label: {
        fontSize: 14,
        fill: '#333333',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: 'rect',
          type: 'rect',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    zIndex: 0,
    ports,
  },
  {
    shape: 'circle',
    width: 40,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
      },
      label: {
        fontSize: 14,
        fill: '#333333',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: 'circle',
          type: 'circle',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    zIndex: 0,
    ports,
  },
  {
    shape: 'ellipse',
    width: 50,
    height: 30,
    attrs: {
      body: {
        strokeWidth: 1,
      },
      label: {
        fontSize: 14,
        fill: '#333333',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: 'ellipse',
          type: 'ellipse',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    ports,
    zIndex: 0,
  },
  {
    shape: 'polygon',
    width: 50,
    height: 30,
    attrs: {
      body: {
        strokeWidth: 1,
        refPoints: '0, 10 10, 0 20, 10 10, 20',
      },
      image: {
        options: {
          kindName: '内置组件',
          name: 'polygon',
          type: 'polygon',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    ports,
    zIndex: 0,
  },
  {
    width: 60,
    height: 30,
    shape: 'rect',
    attrs: {
      label: {
        contenteditable: 'true', // 编辑开启
      },
      body: {
        rx: 10, // 圆角矩形
        ry: 10,
        strokeWidth: 0,
        fill: 'transparent',
      },
      text: {
        text: '文字',
        fontSize: 14,
        fill: '#333333',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: '文字',
          type: 'text',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    ports,
  },
];

// 场景内置节点
export const sceneBuiltBaseNode = [
  {
    width: 50,
    height: 30,
    attrs: {
      body: {
        strokeWidth: 1,
      },
      label: {
        fontSize: 14,
        fill: '#333333',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: '',
          type: 'rect',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    zIndex: 0,
    ports,
  },
  // {
  //   shape: 'circle',
  //   width: 40,
  //   height: 40,
  //   attrs: {
  //     body: {
  //       strokeWidth: 1,
  //     },
  //     label: {
  //       fontSize: 14,
  //       fill: '#333333',
  //       refX: '50%',
  //       refY: '50%',
  //       textAnchor: 'middle',
  //       textVerticalAnchor: 'middle',
  //       zIndex: 1,
  //     },
  //     image: {
  //       options: {
  //         kindName: '内置组件',
  //         name: 'circle',
  //         type: 'circle',
  //         category: 5,
  //       },
  //       'xlink:href': '1',
  //     },
  //   },
  //   zIndex: 0,
  //   ports,
  // },
  // {
  //   shape: 'ellipse',
  //   width: 50,
  //   height: 30,
  //   attrs: {
  //     body: {
  //       strokeWidth: 1,
  //     },
  //     label: {
  //       fontSize: 14,
  //       fill: '#333333',
  //       refX: '50%',
  //       refY: '50%',
  //       textAnchor: 'middle',
  //       textVerticalAnchor: 'middle',
  //       zIndex: 1,
  //     },
  //     image: {
  //       options: {
  //         kindName: '内置组件',
  //         name: 'ellipse',
  //         type: 'ellipse',
  //         category: 5,
  //       },
  //       'xlink:href': '1',
  //     },
  //   },
  //   ports,
  //   zIndex: 0,
  // },
  // {
  //   shape: 'polygon',
  //   width: 50,
  //   height: 30,
  //   attrs: {
  //     body: {
  //       strokeWidth: 1,
  //       refPoints: "0, 10 10, 0 20, 10 10, 20"
  //     },
  //     image: {
  //       options: {
  //         kindName: '内置组件',
  //         name: '内置组件',
  //         category:5,
  //       },
  //       'xlink:href': '1',
  //     },
  //   },
  //   ports,
  //   zIndex: 0,
  // },
  {
    shape: 'html',
    width: 60,
    height: 30,
    html(cell) {
      const titleDiv = document.createElement('div');
      titleDiv.innerHTML = '文字';
      return titleDiv;
    },
    attrs: {
      label: {
        contenteditable: 'true', // 编辑开启
      },
      body: {
        rx: 10, // 圆角矩形
        ry: 10,
        strokeWidth: 0,
        fill: 'transparent',
      },
      text: {
        text: '文字',
        fontSize: 14,
        fill: isLightTheme.value ? '#5b6775' :'#fff',
        refX: '50%',
        refY: '50%',
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
        zIndex: 1,
      },
      image: {
        options: {
          kindName: '内置组件',
          name: '文字',
          type: 'text',
          category: 5,
        },
        'xlink:href': '1',
      },
    },
    ports,
  },
];

// 内置节点映射
export const builtBaseNodeMap = {
  '': 0,
  rect: 0,
  circle: 1,
  ellipse: 2,
  polygon: 3,
  html: 4,
};

// 组件映射
export const categoryMap = [
  {
    name: '虚拟机',
    category: 1,
    code: 'vmWare'
  },
  {
    name: '容器',
    category: 2,
    code: 'docker'
  },
  {
    name: '集群网络',
    category: 4,
    code: 'cluster'
  },
  {
    name: '沙箱网络',
    category: 6,
    code: 'sandbox'
  },
  {
    name: 'VPC网络',
    category: 10,
    code: 'vpc'
  },
  {
    name: '内置图形',
    category: 5,
    code: 'builtIn'
  },
  {
    name: '本地实物组件实例（物理设备）',
    category: 7,
    code: 'localDevice'
  },
  {
    name: '远程实物组件实例（物理设备）',
    category: 8,
    code: 'remoteDevice'
  },
]
